<template>		
	<view class="main" style="height: 100%;">
		<uni-search-bar @confirm="search" @cancel="searchCancle" placeholder="输出入产品名称" v-model="searchValue">
		</uni-search-bar>	
		<scroll-view class="scroll-v list scroller-content" enableBackToTop="true" scroll-y @scrolltolower="loadMore()">
		
			<view class="">
				<uni-card v-for="(item, index) in dataList" :key="index" :title="item.product_name" :sub-title="item.category.cat_name" :extra="'库存量:'+ item.stock_count">
						<!-- <view class="uni-body">分类：{{  }}</view> -->
						<!-- <view class="uni-body">库存量：{{}}</view> -->
						<view v-if="item.shop_stock.length>0" class="uni-body" >店铺当前库存：</view>
						<view v-if="item.shop_stock.length>0" class="" v-for="(item2, index2) in item.shop_stock">
							{{item2.shop.shop_name}} : {{item2.stock_num}}
						</view>
					</uni-card>
				<uni-load-more iconType="auto" :status="status" />
			</view>

		</scroll-view>
	</view>

</template>



<script>

	import api from "@/utils/api.js";
	export default {
		data() {
			return {
				dataList: [],
				status: 'more',
				searchValue: "",
				page: 1
			}
		},
		onShow() {
			this.fetchData();
		},
		methods: {
			loadMore(){
				console.log("loadMore")
				this.fetchData();
			},
			addShop(){
				uni.navigateTo({
					url: "/pages/kucun/product/add"
				})
			},
			search(){
				this.page = 1;
				this.dataList = [];
				this.fetchData();

			},
			searchCancle(){
				this.searchValue = "";
				this.page = 1;
				this.fetchData();
				
			},
			async fetchData(){
				this.status = 'loading';
				let { result } = await api.productList({keyword: this.searchValue, page: this.page});
				
				this.dataList = this.dataList.concat(result['data']['list']);
				if(result['data']['list'].length == 0) {
					this.status = "noMore"
				}else{
	
					this.page++;
					this.status = "more"
				}
			}
		}
	}
</script>

<style>
    .scroll-v {
        flex: 1;
        /* #ifndef MP-ALIPAY */
        flex-direction: column;
        /* #endif */
        width: 750rpx;
		width:100%;
    }
	.main{
		height: 100%;
		width: 100%;
	}
	
	.scroller-content{
		height: calc(100vh - var(--window-top));
		width: 100%;
	}
	
</style>
